<template>
    <view style="padding-bottom: 150upx;">
        <view class="detailsContainer">
            <view class="details-box">
                <view class="details-title-box">
                    <view class="details-title">
                        {{ item.shop.shopname }}
                    </view>
                    <van-icon name="arrow" color="#999999" />
                </view>
                <view class="details-content-box">
                    <view class="details-content">
                        <image src="https://daiyue.gzzhenyi.net/static/products/cpd1.png" mode="aspectFill" />
                    </view>
                    <view class="details-content-text" v-for="(ites, index) in item.goods" :key="index">
                        <view class="details-content-text-title">
                            <view class="details-content-text-title-text">{{ ites.title }}</view>
                            <view class="details-content-text-title-price">¥{{ ites.price }}</view>
                        </view>
                        <view class="details-content-text-title">
                            <view class="details-content-text-title-span">{{ ites.specification }}</view>
                            <view class="details-content-text-title-span">X{{ ites.number }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="details-box">
                <view class="details-title-flex">
                    <view class="details-title">实付款</view>
                    <view class="details-name">￥{{ item.pay.actual_payment }}</view>
                </view>
                <view class="details-title-flex">
                    <view class="details-title">订单编号</view>
                    <view class="details-name">{{ item.pay.pay_no }}</view>
                </view>
                <view class="details-title-flex">
                    <view class="details-title">收货信息</view>
                    <!-- <view class="details-name">彭于晏 18897361836 广东省广州市天河区黄埔大道100号 万达茂天歌小区一单元10室</view> -->
                    <view class="details-name">{{ address }}</view>
                </view>

                <view class="details-title-flex">
                    <view class="details-title">支付方式</view>
                    <view class="details-name">{{ item.logistics.status }}</view>
                </view>
                <view class="details-title-flex">
                    <view class="details-title">创建时间</view>
                    <view class="details-name">{{ item.logistics.time || '暂无' }}</view>
                </view>
                <view class="details-title-flex">
                    <view class="details-title">付款时间</view>
                    <view class="details-name">{{ item.paymenttime || '暂无' }}</view>
                </view>
                <view class="details-title-flex">
                    <view class="details-title">成交时间</view>
                    <view class="details-name">{{ item.delivertime || '暂无' }}</view>
                </view>
            </view>
            <view class="details-box" v-if="item.pay.number == 5 || item.pay.number == 6">
                <button class="service" type="default" plain="true" open-type="contact">
                    <image src="../../static/index/sale.svg" mode="scaleToFill" />
                    <view class="service-text">申请售后</view>
                </button>
            </view>
            <view class="details-box">
                <button class="service" type="default" plain="true" open-type="contact">

                    <image src="https://daiyue.gzzhenyi.net/static/index/service.svg" mode="scaleToFill" />
                    <view class="service-text">联系客服</view>
                </button>
            </view>

            <view class="details-bottom">
                <view class="details-bottom-container">
                    <view class="details-bottom-text" @tap="getLogistics" v-if="item.state == 3">查看物流</view>
                    <view class="details-bottom-text" @tap="toRaise" v-if="item.state == 4">评价
                    </view>
                    <view class="details-bottom-text" v-if="item.state == 2" @tap="cancel">取消订单</view>

                    <view class="details-bottom-order" v-if="item.state == 1" @tap="toPay">去支付</view>

                    <view class="details-bottom-order" v-if="item.state == 6 || item.state == 7">
                        再买一件</view>

                    <view class="details-bottom-order" @tap="confirm" v-if="item.state == 3">确认收货</view>
                </view>
            </view>

        </view>
        <view class="guess">
            <view class="likeimages" style="margin-top: 50upx;">
                <image src="https://daiyue.gzzhenyi.net/static/index/Guess.svg" mode="scaleToFill" />
            </view>
            <guess-like />
        </view>
    </view>
</template>

<script>
import guessLike from "@/components/cart/guessLike.vue"
import { getOrderDetail, confirmOrder, cancelOrder, payOrder } from '@/api/api.js'
export default {
    components: {
        guessLike
    },
    data() {
        return {
            id: "",
            item: {},
            states: ["订单", "待支付", "待发货", "待收货", "待评论", "售后订单", "交易成功"],//订单状态
        }
    },
    computed: {
        address() {
            return `${this.item.address.name} ${this.item.address.mobile} ${this.item.address.address.split('/').join('')}`;
        }
    },
    onLoad(options) {
        this.id = options.id
        
    },
	onShow() {
		this.detail()
	},
    methods: {
        detail() {
            getOrderDetail({ id: this.id }).then(res => {
                this.item = res.data
                uni.setNavigationBarTitle({
                    title: res.data.state_text
                });
            })
        },
		// 获取物流信息
		getLogistics(){
			uni.navigateTo({
				url:"/long/logistics/logistics?id="+this.id
			})
		},
        // 确认收货
        confirm() {
            confirmOrder({ order_id: this.id }).then(res => {
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })
                if (res.code == 1) {
                    this.detail()
                }

            })
        },
        // 取消订单
        cancel() {
            cancelOrder({ id: this.id }).then(res => {
                if (res.code == 1) {
                    uni.navigateBack({ delta: 1 })
                }
                uni.showToast({
                    title: res.msg,
                    icon: 'none'
                })

            })
        },
        toOrder() {
            uni.switchTab({ url: '/pages/cart/cart' })
        },
        toRaise() {
            uni.navigateTo({ url: '/pages/order/appraise/appraise?id='+this.id })
        },
        toPay() {
            payOrder({
                order_id: this.id
            }).then(res => {
                console.log(res)
                if (res.code == 1) {
                    uni.requestPayment({
                        provider: 'wxpay',
                        "timeStamp": res.data.timeStamp, //时间戳
                        "nonceStr": res.data.nonceStr,//随机字符串
                        "package": res.data.package,//接口返回的prepay_id
                        "signType": res.data.signType,//签名算法，需要与后台下单时一致
                        "paySign": res.data.paySign,// 签名

                        success: function (res) {
                            console.log('success:' + JSON.stringify(res));
                            uni.navigateTo({ url: '/long/payment/payment?payShow=true' })
                        },
                        fail: function (err) {
                            console.log('fail:' + JSON.stringify(err));
                            uni.navigateTo({ url: '/long/payment/payment?payShow=false' })
                        }
                    });
                } else {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none'
                    })
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.detailsContainer {
    margin: 30upx;

    .details-box {
        padding: 20upx;
        background-color: #fff;
        box-shadow: 0px 2px 8px 0px rgba(205, 205, 205, 0.2031);
        border-radius: 15upx;
        margin-bottom: 20upx;
    }

    .details-title-box {
        display: flex;
        align-items: center;

        .details-title {
            font-size: 30upx;
            color: #333333;
            margin-right: 10upx;
            max-width: 300upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-break: break-all;
            word-wrap: break-word;
        }
    }

    .details-content-box {
        display: flex;
        // align-items: center;
        margin-top: 20upx;

        .details-content image {
            width: 197upx;
            height: 147upx;
            background-color: #FFFFFF;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.06);
            border-radius: 8px;

        }

        .details-content-text {
            flex: 1;
            margin-left: 20upx;

            .details-content-text-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15upx;

                .details-content-text-title-text {
                    font-size: 30upx;
                    color: #333333;
                    max-width: 300upx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    word-break: break-all;
                }

                .details-content-text-title-price {
                    color: #333333;
                    font-size: 26upx;
                }

                .details-content-text-title-span {
                    font-size: 20upx;
                    color: #5C5C5C;
                }
            }
        }
    }

    .details-title-flex {
        display: flex;
        justify-content: space-between;
        align-items: top;
        margin: 30upx 0;

        .details-title {
            font-size: 30upx;
            color: #333333;
            font-weight: normal;
        }

        .details-name {
            font-size: 30upx;
            color: #333333;
            font-weight: normal;
            max-width: 505upx;
            text-align: right;
        }
    }

    .service {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 0;

        .service-text {
            font-size: 30upx;
            color: #333333;
            margin-left: 20upx;
        }

        image {
            width: 30upx;
            height: 30upx;
        }
    }

    .details-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #FFFFFF;
        height: 150upx;

        .details-bottom-container {
            display: flex;
            justify-content: flex-end;

            .details-bottom-text {
                font-size: 30upx;
                padding: 14upx 30upx;
                border-radius: 50upx;
                box-sizing: border-box;
                border: 1px solid #A2A2A2;
                color: #333333;
                margin: 10upx 10upx;
            }

            .details-bottom-order {
                font-size: 30upx;
                // padding: 14upx 30upx;
                width: 210upx;
                height: 70upx;
                text-align: center;
                line-height: 70upx;
                border-radius: 45upx;
                box-sizing: border-box;
                // border: 1px solid #FF6200;
                background-color: #FF6200;
                color: #FFFFFF;
                margin: 10upx 20upx;
                box-sizing: border-box;
            }
        }
    }
}



.likeimages {
    width: 500upx;
    margin: 0 auto;

    image {
        width: 500upx;
        height: 42upx;
    }
}
</style>